<template>
  <div class="accHome-container">
    <van-nav-bar :title="$t('h.accPage.pageTitle')" style="background: #ededed" />

    <div class="account-box">
      <div class="account-info">
        <van-card :desc="userinfo.user_tel" :title="userinfo.nickname" :thumb="require('@/assets/CNJMh.jpeg')">
          <template #tags>
            <van-icon name="setting-o" @click="$router.push({ name: 'settings' })" />
          </template>
        </van-card>
      </div>

      <div class="account-data">
        <div class="credit-box" @click="$router.push({ name: 'credit' })">
          <span>{{ $t('h.accPage.balance') }}</span>
          <span>{{ userAssets ? userAssets.balance : 0 }}</span>
        </div>
        <div class="point-box" @click="$router.push({ name: 'point' })">
          <span>{{ $t('h.accPage.point') }}</span>
          <span>{{ userAssets ? userAssets.points : 0 }}</span>
        </div>
        <div class="coupon-box" @click="$router.push({ name: 'coupon' })">
          <span>{{ $t('h.accPage.coupon') }}</span>
          <span>{{ !userAssets ? userAssets.coupons.length : 0 }}</span>
        </div>
      </div>

      <div class="account-function">
        <div class="function-one">
          <div class="address-box" @click="viewAddress">
            <van-icon name="location-o" />
            <span>{{ $t('h.accPage.address.title') }}</span>
          </div>
          <div class="card-box" @click="viewCard">
            <van-icon name="idcard" />
            <span>{{ $t('h.accPage.card.title') }}</span>
          </div>
          <div class="favorite-box" @click="$msg.success('暂未开发')">
            <van-icon name="star-o" />
            <span>{{ $t('h.accPage.favorites') }}</span>
          </div>
        </div>
        <div class="function-two">
          <div class="share-box" @click="showShare = true">
            <van-icon name="share-o" />
            <span>{{ $t('h.accPage.share') }}</span>
          </div>
        </div>
      </div>
    </div>

    <div>
      <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="selectShare" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Toast } from 'vant'

export default {
  name: 'AccHome',
  data() {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ]
    }
  },
  computed: {
    ...mapState({ userinfo: state => state.user.userinfo, userAssets: state => state.account.userAssets })
  },
  methods: {
    selectShare(option) {
      Toast(option.name)
      this.showShare = false
    },
    viewAddress() {
      this.$router.push({ name: 'address' })
    },
    viewCard() {
      this.$router.push({ name: 'card' })
    }
  }
}
</script>

<style lang="less" scoped>
.accHome-container {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 640px;
  background-color: #ededed;
}

.van-nav-bar {
  position: fixed;
  width: 100%;
  max-width: 640px;
  z-index: 3;
}

.account-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  top: 46px;
  width: 100%;
  height: 100%;
  background-color: #ededed;
}
.account-info {
  width: 97%;
  .van-card {
    width: 100%;
    background: #ededed;
    .van-card__header {
      display: flex;
      align-items: center;
      height: 120px;
      .van-card__thumb {
        margin-right: 1.2em;
        .van-image {
          overflow: hidden;
          border-radius: 50%;
          border: 1px solid #c9c9c9;
        }
      }
      .van-icon-setting-o {
        position: absolute;
        right: 0.3em;
        bottom: 31.5px;
        font-size: 2.1em;
        color: #525252;
      }
      .van-multi-ellipsis--l2 {
        line-height: 1.5em;
        font-size: 1.5em;
        color: #4d4d4d;
      }
      .van-ellipsis {
        line-height: 1.2em;
        font-size: 1.2em;
        color: #919191;
      }
    }
  }
}

.account-data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 97%;
  height: 5em;
  margin-top: 0.45em;
  border-radius: 9px;
  background: white;
  .credit-box,
  .point-box,
  .coupon-box {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 33%;
    span:nth-child(1) {
      margin-bottom: 0.2em;
      color: #525252;
      font-size: 1em;
    }
    span:nth-child(2) {
      font-size: 0.7em;
      color: #6e6e6e;
    }
  }
  .point-box,
  .coupon-box {
    span:nth-child(2) {
      font-size: 0.7em;
      color: #ffbf05;
    }
  }
}

.account-function {
  width: 97%;
  height: 12em;
  margin-top: 0.45em;
  border-radius: 9px;
  background: white;
  .van-icon {
    font-size: 1.8em;
    margin-bottom: 0.2em;
    color: #424242;
  }
  .function-one {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 6em;
    border-bottom: 1px solid #ededed;
    .address-box,
    .card-box,
    .favorite-box {
      width: 33%;
      display: flex;
      flex-direction: column;
      text-align: center;
      span:nth-child(2) {
        font-size: 0.8em;
        color: #999999;
      }
    }
  }
  .function-two {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 6em;
    .share-box {
      position: relative;
      width: 33%;
      display: flex;
      flex-direction: column;
      text-align: center;
      span:nth-child(2) {
        font-size: 0.8em;
        color: #999999;
      }
    }
  }
}
</style>
